<template>
	<z-paging ref="paging" v-model="dataList" @query="queryList">
		<!-- 之后-vue3 -->
		<template #top>
			<view>我是固定在顶部的view</view>
		</template>
		<view class="view" v-for="(item, index) in dataList" :key="index">{{ index }}</view>

		<qiun-data-charts type="ring" :opts="opts" :chartData="chartData" />
	</z-paging>
</template>

<script setup>
import { ref, reactive, toRefs, toRef, getCurrentInstance, onMounted } from 'vue';
import { onShow, onLoad } from '@dcloudio/uni-app';
const { proxy: that } = getCurrentInstance();
onLoad((e) => {
	// console.log(e);
	data.getServerData();
});
onShow(() => {
	// console.log('页面显示执行');
});
// let title = ref(0);
// let num = ref(0);
// // let img = ref(null);
// let numRef = ref(null);
// onMounted(() => {
// 	// console.log(img.value); // Proxy {…}
// 	console.log(numRef.value); // Proxy {…}
// 	console.log(that.$refs.img);
// });
// const add = function () {
// 	data.demo = data.demo == 'demo' ? 'uni_app' : 'demo';
// 	num.value++;
// 	num.value = num.value;
// 	// console.log(data.demo, num.value);
// };
// const queryList = function (page, num) {
// 	console.log(page, num);
// 	that.$refs.paging.complete([1]);
// };
const data = reactive({
	demo: 'demo',
	dataList: [],
	chartData: {},
	opts: {
		// xAxis: {
		// 	disableGrid: true
		// },
		// yAxis: {
		// 	data: [
		// 		{
		// 			min: 0
		// 		}
		// 	]
		// },
		// extra: {
		// 	column: {
		// 		type: 'group'
		// 	}
		// }
		rotate: false,
		rotateLock: false,
		color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
		padding: [5, 5, 5, 5],
		dataLabel: true,
		enableScroll: false,
		legend: {
			show: true,
			position: 'right',
			lineHeight: 25
		},
		title: {
			name: '收益率',
			fontSize: 15,
			color: '#666666'
		},
		subtitle: {
			name: '70%',
			fontSize: 25,
			color: '#7cb5ec'
		},
		extra: {
			ring: {
				ringWidth: 60,
				activeOpacity: 0.5,
				activeRadius: 10,
				offsetAngle: 0,
				labelWidth: 15,
				border: false,
				borderWidth: 3,
				borderColor: '#FFFFFF'
			}
		}
	},
	queryList(page, num) {
		console.log(page, num);
		that.$refs.paging.complete([]);
	},
	getServerData() {
		setTimeout(() => {
			//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
			let res = {
				series: [
					{
						data: [
							{ name: '一班', value: 50 },
							{ name: '二班', value: 30 },
							{ name: '三班', value: 20 },
							{ name: '四班', value: 18 },
							{ name: '五班', value: 8 }
						]
					}
				]
			};
			this.chartData = JSON.parse(JSON.stringify(res));
		}, 500);
	}
});
let { demo, dataList, chartData, opts, getServerData, queryList } = toRefs(data);
</script>

<style>
.view {
	width: 100%;
	height: 200rpx;
	margin-bottom: 20rpx;
	background-color: #f2f2f2;
}
</style>
